<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>快捷跑腿 - 专业代取、代送、代购、代办、陪诊服务平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
  <style>
    /* 全局样式 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    body {
      background-color: #f3f4f6;
      color: #4b5563;
      padding-bottom: 70px; /* 为底部导航留出空间 */
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .page-container {
      display: none;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 24px;
      margin-bottom: 24px;
    }

    #home-page {
      display: block; /* 默认显示首页 */
    }

    .section-title {
      font-size: 20px;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 16px;
    }

    .card {
      background: white;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.08);
      border-color: #d1d5db;
    }

    .order-card {
      background: white;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      padding: 18px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      margin-bottom: 12px;
      cursor: pointer;
    }

    .order-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.08);
      border-color: #3b82f6;
    }

    .btn-primary {
      background-color: #3b82f6;
      color: white;
      height: 44px;
      padding: 0 32px;
      border-radius: 8px;
      border: none;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

    .btn-primary:hover {
      background-color: #2563eb;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    }

    .btn-accept {
      background-color: #3b82f6;
      color: white;
      height: 36px;
      padding: 0 20px;
      border-radius: 6px;
      border: none;
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
      min-width: 80px;
    }

    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px 0 8px;
      background: white;
      border-top: 1px solid #e5e7eb;
      display: flex;
      justify-content: space-around;
      z-index: 100;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }

    .nav-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      color: #9ca3af;
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 8px;
      transition: all 0.2s;
    }

    .nav-link:hover, .nav-link.active {
      color: #3b82f6;
      background-color: #f0f9ff;
    }

    /* 服务类型四列布局 - 无框样式 */
    .service-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 16px;
    }

    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
      border-radius: 12px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      text-align: center;
      height: 100px;
    }

    .service-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    }

    .service-icon-container {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    }

    .service-icon {
      font-size: 24px;
    }

    .service-name {
      font-size: 13px;
      font-weight: 600;
      color: #1f2937;
    }

    /* 搜索框样式 */
    .search-box {
      position: relative;
      margin-bottom: 20px;
    }

    .search-box input {
      width: 100%;
      padding: 12px 45px 12px 15px;
      border-radius: 25px;
      border: 1px solid #e5e7eb;
      font-size: 14px;
      transition: all 0.3s;
    }

    .search-box input:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
      outline: none;
    }

    .search-icon {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #6b7280;
    }

    /* 新增：轮播图样式 */
    .carousel-container {
      width: 100%;
      height: 230px; /* 轮播图高度，适配移动端 */
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      margin-bottom: 24px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    }

    .carousel-slide {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .carousel-slide.active {
      opacity: 1;
      z-index: 1;
    }

    .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 确保图片填满容器，不拉伸变形 */
    }

    /* 轮播图指示器 */
    .carousel-indicators {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .indicator-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      transition: all 0.3s;
    }

    .indicator-dot.active {
      width: 24px;
      border-radius: 4px;
      background-color: white;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .container {
        padding: 15px;
      }

      .page-container {
        padding: 16px;
      }

      .service-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }

      .service-item {
        padding: 10px 6px;
        height: 90px;
      }

      .service-icon-container {
        width: 42px;
        height: 42px;
        margin-bottom: 6px;
      }

      .service-icon {
        font-size: 20px;
      }

      .service-name {
        font-size: 12px;
      }

      /* 轮播图响应式：调整高度 */
      .carousel-container {
        height: 150px;
      }
    }

    @media (max-width: 480px) {
      .service-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }

      .service-item {
        padding: 8px 4px;
        height: 80px;
      }

      .service-icon-container {
        width: 36px;
        height: 36px;
        margin-bottom: 5px;
      }

      .service-icon {
        font-size: 18px;
      }

      .service-name {
        font-size: 11px;
      }

      /* 轮播图响应式：进一步降低高度 */
      .carousel-container {
        height: 120px;
      }
    }

    @media (max-width: 360px) {
      .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      .service-item {
        height: 75px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <!-- 用户首页 -->
  <div id="home-page" class="page-container">

    <!-- 新增：轮播图模块 -->
    <div class="carousel-container">
      <!-- 轮播图1：新用户优惠 -->
      <div class="carousel-slide active">
        <img src="https://picsum.photos/id/26/1200/300" alt="新用户专享：首单立减10元">
      </div>
      <!-- 轮播图2：热门服务 -->
      <div class="carousel-slide">
        <img src="https://picsum.photos/id/42/1200/300" alt="代取件+代送达，组合下单更优惠">
      </div>
      <!-- 轮播图3：陪诊服务推广 -->
      <div class="carousel-slide">
        <img src="https://picsum.photos/id/65/1200/300" alt="专业陪诊服务，老人就医更安心">
      </div>


      <!-- 轮播图指示器 -->
      <div class="carousel-indicators">
        <div class="indicator-dot active" data-index="0"></div>
        <div class="indicator-dot" data-index="1"></div>
        <div class="indicator-dot" data-index="2"></div>
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="search-box">
      <input type="text" placeholder="搜索服务、地址或关键词...">
      <span class="search-icon iconify" data-icon="mdi:magnify"></span>
    </div>

    <!-- 服务类型 - 四列布局（无框） -->
    <div>
      <h2 class="section-title">选择服务类型</h2>
      <div class="service-grid">
        <div class="service-item" data-service="代取件">
          <div class="service-icon-container">
            <span class="service-icon iconify text-blue-600" data-icon="mdi:package-variant"></span>
          </div>
          <span class="service-name">代取件</span>
        </div>
        <div class="service-item" data-service="代送达">
          <div class="service-icon-container">
            <span class="service-icon iconify text-green-500" data-icon="mdi:motorbike"></span>
          </div>
          <span class="service-name">代送达</span>
        </div>
        <div class="service-item" data-service="代购物">
          <div class="service-icon-container">
            <span class="service-icon iconify text-orange-500" data-icon="mdi:cart"></span>
          </div>
          <span class="service-name">代购物</span>
        </div>
        <div class="service-item" data-service="代办事">
          <div class="service-icon-container">
            <span class="service-icon iconify text-purple-500" data-icon="mdi:file-document"></span>
          </div>
          <span class="service-name">代办事</span>
        </div>
        <div class="service-item" data-service="陪诊服务">
          <div class="service-icon-container">
            <span class="service-icon iconify text-pink-500" data-icon="mdi:doctor"></span>
          </div>
          <span class="service-name">陪诊服务</span>
        </div>
        <div class="service-item" data-service="代排队">
          <div class="service-icon-container">
            <span class="service-icon iconify text-red-500" data-icon="mdi:account-group"></span>
          </div>
          <span class="service-name">代排队</span>
        </div>
        <div class="service-item" data-service="文件代办">
          <div class="service-icon-container">
            <span class="service-icon iconify text-indigo-500" data-icon="mdi:file-sign"></span>
          </div>
          <span class="service-name">文件代办</span>
        </div>
        <div class="service-item" data-service="宠物照看">
          <div class="service-icon-container">
            <span class="service-icon iconify text-yellow-500" data-icon="mdi:paw"></span>
          </div>
          <span class="service-name">宠物照看</span>
        </div>
      </div>
    </div>

    <!-- 热门订单 -->
    <div class="mt-8">
      <div class="flex justify-between items-center mb-4">
        <h2 class="section-title">热门订单</h2>
        <a href="#" data-target="order-hall" class="text-blue-600 text-sm font-medium">查看全部 ></a>
      </div>
      <div class="space-y-3">
        <div class="order-card" data-target="order-detail">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center gap-2">
              <span class="iconify text-blue-600 text-xl" data-icon="mdi:package-variant"></span>
              <span class="font-semibold text-gray-800">代取件</span>
            </div>
            <div class="flex items-center gap-1 text-gray-500 text-sm">
              <span class="iconify" data-icon="mdi:map-marker"></span>
              <span>3.2km</span>
            </div>
          </div>

          <div class="mb-4">
            <div class="flex items-start gap-2 mb-2">
              <span class="iconify text-green-500 mt-1" data-icon="mdi:map-marker-outline"></span>
              <div>
                <p class="font-medium text-gray-800">取件：世纪联华超市</p>
                <p class="text-sm text-gray-500 mt-0.5">浙江省杭州市西湖区</p>
              </div>
            </div>
            <div class="flex items-start gap-2">
              <span class="iconify text-red-500 mt-1" data-icon="mdi:map-marker"></span>
              <div>
                <p class="font-medium text-gray-800">送到：湖滨小区12幢301室</p>
                <p class="text-sm text-gray-500 mt-0.5">预计15分钟路程</p>
              </div>
            </div>
          </div>

          <div class="flex justify-between items-center pt-3 border-t border-gray-100">
            <div class="flex items-center gap-4">
              <div class="text-blue-600 font-bold text-xl">￥18</div>
              <span class="text-xs text-gray-400">发布于 10:23</span>
            </div>
            <button class="btn-accept">接单</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 其他页面保持不变 -->
  <div id="publish-page" class="page-container">
    <!-- 发布需求页面内容 -->
    <p>发布需求页面</p>
  </div>

  <div id="order-detail" class="page-container">
    <!-- 订单详情页面内容 -->
    <p>订单详情页面</p>
  </div>

  <div id="order-hall" class="page-container">
    <!-- 接单大厅页面内容 -->
    <p>接单大厅页面</p>
  </div>

  <div id="message-page" class="page-container">
    <!-- 消息页面内容 -->
    <p>消息页面（点击底部导航可切换）</p>
  </div>
</div>

<!-- 底部导航栏 -->
<div class="bottom-nav">
  <a href="#" data-target="home-page" class="nav-link active">
    <span class="iconify text-xl" data-icon="mdi:home-outline"></span>
    <span>首页</span>
  </a>
  <a href="#" data-target="order-hall" class="nav-link">
    <span class="iconify text-xl" data-icon="mdi:clipboard-list-outline"></span>
    <span>订单</span>
  </a>
  <a href="#" data-target="message-page" class="nav-link">
    <span class="iconify text-xl" data-icon="mdi:message-outline"></span>
    <span>消息</span>
  </a>
  <a href="#" class="nav-link">
    <span class="iconify text-xl" data-icon="mdi:account-outline"></span>
    <span>我的</span>
  </a>
</div>

<script>
  // 页面切换逻辑
  document.addEventListener('DOMContentLoaded', function() {
    const pages = document.querySelectorAll('.page-container');
    const navLinks = document.querySelectorAll('.nav-link');

    // 1. 服务类型点击事件
    document.querySelectorAll('.service-item').forEach(item => {
      item.addEventListener('click', function() {
        const serviceType = this.getAttribute('data-service');
        alert(`您选择了: ${serviceType}`);
        // 在实际应用中，这里可以跳转到发布需求页面
      });
    });

    // 2. 导航切换
    navLinks.forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('data-target');

        // 隐藏所有页面
        pages.forEach(page => {
          page.style.display = 'none';
        });

        // 显示目标页面
        if (targetId) {
          document.getElementById(targetId).style.display = 'block';
        }

        // 更新导航激活状态
        navLinks.forEach(nav => {
          nav.classList.remove('active');
        });
        this.classList.add('active');
      });
    });

    // 3. 接单按钮事件
    document.querySelectorAll('.btn-accept').forEach(btn => {
      btn.addEventListener('click', function() {
        if (confirm('确定要接单吗？')) {
          alert('接单成功！');
        }
      });
    });

    // 4. 轮播图逻辑（新增）
    const slides = document.querySelectorAll('.carousel-slide');
    const dots = document.querySelectorAll('.indicator-dot');
    const prevBtn = document.querySelector('.carousel-prev');
    const nextBtn = document.querySelector('.carousel-next');
    let currentIndex = 0;
    let carouselInterval;

    // 初始化轮播图
    function initCarousel() {
      // 显示当前轮播图
      updateSlideDisplay();
      // 启动自动轮播
      startAutoCarousel();
    }

    // 更新轮播图显示（切换激活态）
    function updateSlideDisplay() {
      // 移除所有轮播图和指示器的激活态
      slides.forEach(slide => slide.classList.remove('active'));
      dots.forEach(dot => dot.classList.remove('active'));
      // 给当前轮播图和指示器添加激活态
      slides[currentIndex].classList.add('active');
      dots[currentIndex].classList.add('active');
    }

    // 下一张轮播图
    function nextSlide() {
      currentIndex = (currentIndex + 1) % slides.length;
      updateSlideDisplay();
    }

    // 上一张轮播图
    function prevSlide() {
      currentIndex = (currentIndex - 1 + slides.length) % slides.length;
      updateSlideDisplay();
    }

    // 跳转到指定索引的轮播图（点击指示器）
    function goToSlide(index) {
      currentIndex = index;
      updateSlideDisplay();
      // 重置自动轮播计时器
      resetAutoCarousel();
    }

    // 启动自动轮播（3秒切换一次）
    function startAutoCarousel() {
      carouselInterval = setInterval(nextSlide, 3000);
    }

    // 重置自动轮播（用户操作后重新计时）
    function resetAutoCarousel() {
      clearInterval(carouselInterval);
      startAutoCarousel();
    }

    // 绑定轮播图事件
    prevBtn.addEventListener('click', function() {
      prevSlide();
      resetAutoCarousel();
    });

    nextBtn.addEventListener('click', function() {
      nextSlide();
      resetAutoCarousel();
    });

    dots.forEach((dot, index) => {
      dot.addEventListener('click', function() {
        goToSlide(index);
      });
    });

    // 鼠标悬停轮播图时暂停自动轮播，离开后继续
    const carouselContainer = document.querySelector('.carousel-container');
    carouselContainer.addEventListener('mouseenter', function() {
      clearInterval(carouselInterval);
    });

    carouselContainer.addEventListener('mouseleave', function() {
      startAutoCarousel();
    });

    // 初始化轮播图
    initCarousel();
  });
</script>
</body>
</html>
